<template>
    <div  v-on:mouseover="stop()" v-on:mouseout="move()" class="app">
        <transition-group tag="ul" name="image">
            <li v-for="(items,index) in list" v-show="index===num" :key="index" >
                <img :src="items" alt="">{{items}}
                <div>
                <span v-for="(items,index) in data" :key="index" class="nav" @click="change(index)" :class="{'active':index==num}">{{items}}</span>
                </div>
            </li>
        </transition-group>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
            data:['1', '2', '3'],
            time: '',
            num: 0,
            list: [
                require('@/assets/img/0.jpg'),
                require('@/assets/img/1.jpg'),
                require('@/assets/img/2.jpg'),
                require('@/assets/img/3.jpg')
            ]
        })
        const play = () => {
            state.time=setInterval(()=>{
                state.num++;
                if(state.num==3){
                    state.num=0
                }
            },2000)
        }
        onMounted(()=>{
            // 组件加载后的响应行为
            state.play()
        })
        const change = (i) => {
            state.num=i
        }
        const stop = () => {
            clearInterval(state.time)
        }
        const move = () => {
            state.play()
        }
        return {
            ...toRefs(state),
            play,
            change,
            stop,
            move
        }
    }
}
</script>

<style scoped>
  *{
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: black;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
            display: flex;
            justify-content: center;
        }
        .app{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        img{
            width: 500px;
            height: 300px;
        }
        li{
            width: 500px;
            height: 300px;
            border: 5px solid white;
            color: white;
            position: absolute;
        }
        ul{
            width: 510px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }
        .nav{
            background-color: #c3c3c3;
            color: white;
            margin-left: 10px;
            font-size: 20px;
            border-radius: 50%;
           padding: 0 8px;
            margin-bottom: 10px;
            opacity: 0.5;
        }
        .active{
            opacity: 1;
        }
        li div{
            margin-top: -30px;
        }
        .image-enter-active {
            transition: all 1.5s linear
        }
        .image-leave-active {
            transition: all 1.5s linear;
        }
        .image-enter-to {
            transform: translateX(0);
        }
        .image-enter {
            transform: translateX(100%);
        }
        .image-leave {
            transform: translateX(0);
        }
        .image-leave-to {
            transform: translateX(-100%);
        }
</style>